<!--
 * @Author: TANGB02 13233582+Ace-Tang@user.noreply.gitee.com
 * @Date: 2024-02-02 18:27:18
 * @LastEditors: TANGB02 13233582+Ace-Tang@user.noreply.gitee.com
 * @LastEditTime: 2024-03-06 11:33:40
 * @FilePath: \ycq\ycq\ycq1.0\src\pages\personal\setPerson.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="wrap-setPer">
    <div v-if="router.currentRoute._value.name === 'setPersonal'">
      <a-breadcrumb style="margin: 16px" separator=">">
        <a-breadcrumb-item
          v-for="(item, index) in $route.matched"
          :key="index"
          :to="{ path: item.path }"
          style="cursor: pointer"
        >
          {{ item.meta.title }}
        </a-breadcrumb-item>
      </a-breadcrumb>
      <div class="account-body">
        <span class="account-body-title">账号设置</span>
        <ul>
          <li class="account-body-item">
            <div class="preTitle">
              <span>密</span>
              <span>码</span>
            </div>

            <p>
              <span>存在风险，请设置密码 </span>
              <a href="/personal/setPersonal/setPwd">设置密码</a>
            </p>
          </li>
          <li class="account-body-item">
            <div class="preTitle">
              <span>手</span>
              <span>机</span>
            </div>

            <p>
              <span>{{ phone }}</span>
              <a href="/personal/setPersonal/setPhone">修改手机</a>
            </p>
          </li>
          <li class="account-body-item">
            <div class="preTitle">
              <span>账</span>
              <span>号</span>
              <span>注</span>
              <span>销</span>
            </div>

            <p>
              <a-popconfirm
                title="确定注销账号吗？"
                ok-text="确定"
                cancel-text="取消"
                @confirm="confirm"
                @cancel="cancel"
              >
                <template #icon
                  ><QuestionCircleOutlined style="color: red"
                /></template>
                <a href="javascrip:;">立即注销</a>
              </a-popconfirm>
            </p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 三级路由显示 -->
    <router-view></router-view>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { QuestionCircleOutlined } from "@ant-design/icons-vue";
import { loginOut } from "@/service/api.js";
import LocalCatch from "@/utils/token.js";
import { message } from "ant-design-vue";
import { ref } from "vue";
import useLogin from "@/utils/statusManage.js";

const router = useRouter();
const { getIsLogin, isLogin, setIsLogin } = useLogin();
const phone = ref(LocalCatch.getToken("phone"));
console.log(phone.value);

// 注销账号
const confirm = async () => {
  // 确定注销账号
  const userId = parseInt(LocalCatch.getToken("suerId"));
  const res = await loginOut({ userId });

  //注销后
  if (res.code === 1) {
    LocalCatch.clearToken();
    setIsLogin(false);
    message.success("注销成功");
    router.push({ name: "home" });
  } else message.error("注销失败");
};
</script>
<style scoped>
ul,
li {
  list-style: none;
}
a {
  text-decoration: none;
  cursor: pointer;
}
.wrap-setPer {
  width: 1000px;

  .account-body {
    width: 100%;
    padding: 24px 16px 0;
    min-height: 200px;
    background: #fff;
    font-size: 14px;
    display: flex;
    flex-flow: column nowrap;
    margin-top: 30px;
    .account-body-title {
      min-width: 72px;
      height: 24px;
      font-size: 18px;
      font-weight: 600;
      color: #2e2e2e;
      line-height: 24px;
    }
    ul {
      border: 0;
      font-size: 100%;
      vertical-align: baseline;
      margin: 0;
      padding: 0;
      font-family: PingFang SC, Hiragino Sans GB, Arial, Microsoft YaHei,
        Verdana, Roboto, Noto, Helvetica Neue, sans-serif !important;

      display: flex;
      flex-flow: column nowrap;
      width: 100%;
      .account-body-item {
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        border-top: 1px solid #f0f0f5;
        padding: 16px;

        .preTitle {
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-between;
          width: 54px;
          height: 24px;
        }
        p {
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-between;

          a {
            display: inline-block;
            min-width: 56px;
            margin-left: 32px;
            color: #1989fa;
          }
        }
      }
    }
  }
}
</style>
